Ext.define('MyDesktop.ScenarioRowExpander', {
    //extend: 'MyDesktop.NestingRowExpander',
    extend: 'Ext.ux.RowExpander',
    alias: 'plugin.scenariorowexpander',

    /**
     * @cfg {Object} the main page selection listener
     */
    pageSelectionListener: null,

    openNewExtensionWindow: null,

    removeSelectedExtension: null,

    extensionMover: null,

    expandOnEnter : false,
    expandOnDblClick : false,

    actAsTree        : true,
    //treeLeafProperty : 'is_leaf',

    // temporary config
    projectModelUrl: null,

    rowBodyTpl: [
        '<div id="entry-row-expansion-{id}"></div>'
    ],

    constructor: function() {
        this.callParent(arguments);

        this.lastHeight = 0;
    },

    onExpandBody: function(exp, rec, body, rowIndex) {
        var parentGrid = this.getCmp();

        var applyToElemId = 'entry-row-expansion-' + rec.data.id;
        var scenarioTabId = "entry-extensions-tab-" + rec.data.id;
        var scenarioGridId = "entry-extensions-" + rec.data.id;
        var expander = this;

        var nestedExpanderConfig = {
            ptype: 'scenariorowexpander',
            projectModelUrl: this.projectModelUrl,
            pageSelectionListener: this.pageSelectionListener,
            openNewExtensionWindow: this.openNewExtensionWindow,
            removeSelectedExtension: this.removeSelectedExtension,
            extensionMover: this.extensionMover
        };


        var nestedGrid = new MyDesktop.ScenariosGrid({
            id: scenarioGridId,
            title: 'Extensions',
            header: false,
            projectModelUrl: this.projectModelUrl + rec.data.id,
            pageSelectionListener: this.pageSelectionListener,

            parentGrid: parentGrid,

            plugins: [
                nestedExpanderConfig
            ],

            tbar : [
                {
                    text:'Enlarge',
                    handler: function() {
                        nestedGrid.setHeight(t.getHeight() + 30);
                    }
                },
                {
                    text:'Add Extension',
                    tooltip:'Add a new extension',
                    iconCls:'add',
                    handler: function() {
                        expander.openNewExtensionWindow(scenarioGridId, rec.data.id /*context entry id*/)
                    }
                },
                '-',
                {
                    text:'Remove Extension',
                    tooltip:'Remove the selected extension',
                    iconCls:'remove',
                    handler: function() {
                        expander.removeSelectedExtension(scenarioGridId);
                    }
                },
                '-',
                {
                    //text:'Remove Extension',
                    tooltip:'Move the selected extension up',
                    iconCls:'up',
                    handler: function() {
                        expander.extensionMover(scenarioGridId, -1);
                    }
                },
                {
                    //text:'Remove Extension',
                    tooltip:'Move the selected extension down',
                    iconCls:'down',
                    handler: function() {
                        expander.extensionMover(scenarioGridId, 1);
                    }
                }
            ]

//                        expander: new Ext.chloroform.ScenariosRowExpander({
//                            projectModelUrl: projectModelUrl + 'ext?extPath=cp1'
//                        }),
        });

        var t = new Ext.TabPanel({
            title: 'Row Tabs',
            id: scenarioTabId,
            renderTo: applyToElemId,
            //autoTabs:true,
            activeTab:0,
            deferredRender:false,
            border:false,

            items: [
                nestedGrid,
                {
                    title: 'Editor',
                    html: '<p>Some settings in here.</p>'
                },
                {
                    title: 'Settings',
                    html: '<p>Some settings in here.</p>'
                }
            ],

            listeners: {
                resize: {
                    fn: function(tabPanel){

                        var newHeight = tabPanel.getHeight();
                        var deltaExpansion = newHeight - expander.lastHeight;
                        expander.lastHeight = newHeight;

                        parentGrid.addHeight(deltaExpansion);

                    }
                }
            }

        });

    },

    onCollapseBody: function(exp, rec, body, rowIndex) {
        var scenarioTabId = "entry-extensions-tab-" + rec.data.id;
        var extTab = Ext.getCmp(scenarioTabId);
        extTab.destroy();

        var parentGrid = this.getCmp();
        parentGrid.addHeight(-this.lastHeight);
    },

    onGridAfterLayout: function() {
        this.callParent(arguments);

        if (this.view) {
            this.view.on('expandbody', this.onExpandBody, this);
            this.view.on('collapsebody', this.onCollapseBody, this);
        }
    }

//    init: function(grid) {
//        Ext.chloroform.ScenariosRowExpander.superclass.init.call(this, grid);
//        this.on("expand", function(exp, rec) {
//            var applyToElemId = 'entry-row-expansion-' + rec.data.id;
//            var scenarioGridId = "entry-extensions-" + rec.data.id;
//            var expander = this;
//
//            var nestedExpander = new Ext.chloroform.ScenariosRowExpander({
//                projectModelUrl: this.projectModelUrl,
//                pageSelectionListener: this.pageSelectionListener,
//                openNewExtensionWindow: this.openNewExtensionWindow,
//                removeSelectedExtension: this.removeSelectedExtension
//            });
//
//
//            var t = new Ext.TabPanel({
//                title: 'Row Tabs',
//                applyTo: applyToElemId,
//                autoTabs:true,
//                activeTab:0,
//                deferredRender:false,
//                border:false,
//                items: [
//                    new Ext.chloroform.ScenariosGrid({
//                        id: scenarioGridId,
//                        title: 'Extensions',
//                        header: false,
//                        projectModelUrl: this.projectModelUrl + rec.data.id,
//                        pageSelectionListener: this.pageSelectionListener,
//                        expander: nestedExpander,
//
//                        tbar : [
//                            {
//                                text:'Add Extension',
//                                tooltip:'Add a new extension',
//                                iconCls:'add',
//                                handler: function() {
//                                    expander.openNewExtensionWindow(scenarioGridId, rec.data.id /*context entry id*/)
//                                }
//                            },
//                            '-',
//                            {
//                                text:'Remove Extension',
//                                tooltip:'Remove the selected extension',
//                                iconCls:'remove',
//                                handler: function() {
//                                    expander.removeSelectedExtension(scenarioGridId);
//                                }
//                            }
//                        ]
//
////                        expander: new Ext.chloroform.ScenariosRowExpander({
////                            projectModelUrl: projectModelUrl + 'ext?extPath=cp1'
////                        }),
//                    }),
//                    {
//                        title: 'Editor',
//                        html: '<p>Some settings in here.</p>'
//                    },
//                    {
//                        title: 'Settings',
//                        html: '<p>Some settings in here.</p>'
//                    }
//                ]
//            });
//        });
//
//    }

});